<style lang="less" scoped>
    .device {
        width: 100%;
        height: auto;
        overflow: hidden;
        text-align: center;
        padding: 8px;
        display: flex;
        .left{
            flex-grow: 1;
        }
        .right{
            min-width: 300px;
            width: 300px;
            margin-left: 10px;
            .row{
                margin-top: 5px;
                display: flex;
                align-items: flex-start;
                .label{
                    width: 90px;
                    min-width: 90px;
                    text-align: right;
                }
                .value{
                    text-align: left;
                }
            }
        }
    }
</style>
<template>
    <div class="device">
        <div class="left">
            <card-table
                cardtitle="设备列表"
                addbuttext="添加设备"
                :columns="columns"
                :selectList="selectList"
                :defaultSelete="defaultSelete"
                :searchForm="searchForm"
                :formItem="formItem"
                @add="add"
                @refresh="refresh"
                @on-current-change="onCurrentChange"
                :data="data">
                <!--<Button slot="button" type="default" icon="plus-round" @click="wbjlallclick">维保记录</Button>-->
            </card-table>
        </div>
        <div class="right">
            <my-card cardtitle="维保记录" :showright="false"  icon="compose" cardbtn="查看更多" @cardrightclick="wbjlclick">
                <ul>
                    <li v-for="item in wbdata" style="text-align: left">
                        <p>设备名称: {{ item.name }}</p>
                        <p>维保类型: {{ item.type }}</p>
                        <p>维保时间: {{ item.time }}</p>
                        <p>负责人: {{ item.person }}</p>
                        <p>备注:  {{ item.remark }}</p>
                        <div style="height: 1px;width: 100%;background-color: #eee"></div>
                    </li>
                </ul>
            </my-card>
        </div>
        <Modal
            v-model="addDevice"
            title="添加设备"
            :loading="addDeviceLoading"
            @on-ok="addDeviceOk"
            @on-cancel="addDeviceClose">
            <Form :model="addDeviceForm" :label-width="120" ref="addDeviceForm" :rules="rule">
                <FormItem label="设备编号：" prop="number">
                    <Input v-model="addDeviceForm.number" placeholder="请输入工号" :maxlength="16" style="width: 200px"></Input>
                </FormItem>
                <FormItem label="设备名称：" prop="name">
                    <Input v-model="addDeviceForm.name" placeholder="请输入员工姓名" :maxlength="16" style="width: 200px"></Input>
                </FormItem>
                <FormItem label="维保周期(大保)：" prop="lcycle">
                    <Input v-model="addDeviceForm.lcycle" placeholder="请输入维保周期" :maxlength="16" style="width: 200px"></Input>
                </FormItem>
                <FormItem label="维保周期(小保)：" prop="scycle">
                    <Input v-model="addDeviceForm.scycle" placeholder="请输入维保周期" :maxlength="16" style="width: 200px"></Input>
                </FormItem>
                <FormItem label="负责人：" prop="person">
                    <Input v-model="addDeviceForm.person" placeholder="请输入负责人姓名" :maxlength="16" style="width: 200px"></Input>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
    import CardTable from '../components/cardTable.vue'
    import MyCard from '../components/myCard.vue'
    import devicedata from './devicedata.js'
    import protectdata from  './protectdata.js'
    export default {
        name: 'device',
        data () {
            return {
                role: false,
                /*---------添加设备----------*/
                addDevice: false,  // 添加设备弹窗
                addDeviceLoading: true,
                addDeviceForm: {
                    number: '',
                    name: '',
                    lcycle: '',
                    scycle: '',
                    person: ''
                },
                deviceUpdate: false,
                /*---------------------------*/
                wbdata: [],
                columns: [
                    {
                        title: '设备编号',
                        key: 'number',
                        width: 160
                    },
                    {
                        title: '设备名称',
                        key: 'name',
                        width: 200
                    },
                    {
                        title: '状态',
                        key: 'state',
                        render: (h, params) => {
                            if (params.row.state == '正常') {
                                return h('span', {
                                    style: {
                                        color: 'green'
                                    }
                                }, params.row.state)
                            } else {
                                return h('span', {
                                    style: {
                                        color: 'red'
                                    }
                                }, params.row.state)
                            }
                        }
                    },
                    {
                        title: '小保信息',
                        render: (h, params) => {
                            return h('Poptip', {
                                props: {
                                    trigger: 'hover',
                                    placement: "left"
                                }
                            }, [
                                h('Tag', params.row.snextTime),
                                h('div', {
                                    slot: 'content'
                                }, [
                                    h('p', '类型：' + '小保'),
                                    h('p', '周期：' + params.row.scycle + '天'),
                                    h('p', '上次维保日期：' + params.row.slastTime),
                                    h('p', '下次维保时间：' + params.row.snextTime)
                                ])
                            ])
                        }
                    },
                    {
                        title: '大保信息',
                        render: (h, params) => {
                            return h('Poptip', {
                                props: {
                                    trigger: 'hover',
                                    placement: "left"
                                }
                            }, [
                                h('Tag', params.row.lnextTime),
                                h('div', {
                                    slot: 'content'
                                }, [
                                    h('p', '类型：' + '大保'),
                                    h('p', '周期：' + params.row.lcycle + '天'),
                                    h('p', '上次维保日期：' + params.row.llastTime),
                                    h('p', '下次维保时间：' + params.row.lnextTime)
                                ])
                            ])
                        }
                    },
                    {
                        title: '负责人',
                        key: 'person',
                        width: 120
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        render: (h, params) => {
                            return h('div', {
                                style: {
                                    display: 'flex'
                                }
                            }, [
                                h('Button', {
                                    props: {
                                        type: 'text'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        'click': () => {
                                            if (!this.role) {
                                                this.$Notice.error({
                                                    title: '权限不足!',
                                                    desc: ''
                                                });
                                                return
                                            }
                                            this.addDeviceForm = JSON.parse(JSON.stringify(params.row))
                                            this.deviceUpdate = true
                                            this.addDevice = true
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'text'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        'click': () => {
                                            let test = {
                                                name: '维保记录',
                                                id: 'maintenancerecord',
                                                type: true,
                                                url: '/main/maintenancerecord/' + this.current.id + '/key/' + '1'
                                            }
                                            this.util.switchHeadTag(this.$parent, test, this.$store.state.tagdata)
                                        }
                                    }
                                }, '详情')
                            ])
                        }
                    }
                ],  //  表格列
                data: [],  //  表格数据
                selectList: [
                    {
                        label: '设备编号',
                        value: 'number'
                    },
                    {
                        label: '设备名称',
                        value: 'number'
                    },
                    {
                        label: '负责人',
                        value: 'person'
                    },
                    {
                        label: '小保周期',
                        value: 'scycle'
                    },
                    {
                        label: '下次小保时间',
                        value: 'snextTime'
                    },
                    {
                        label: '大保周期',
                        value: 'lcycle'
                    },
                    {
                        label: '下次大保时间',
                        value: 'lnextTime'
                    }
                ],  //  搜索下拉列表
                defaultSelete: 'number',  //  搜索下拉列表默认值
                searchForm: {
                    'number': '',
                    'name': '',
                    'person': '',
                    'scycle': '',
                    'snextTime': '',
                    'lcycle': '',
                    'lnextTime': ''
                },  //  表单初始值
                formItem: [
                    {
                        label: '设备编号',
                        key: 'number',
                        placeholder: '输入设备编号'
                    },
                    {
                        label: '设备名称',
                        key: 'name',
                        placeholder: '输入设备名称'
                    },
                    {
                        label: '负责人',
                        key: 'persion',
                        placeholder: '输入负责人姓名'
                    },
                    {
                        label: '小保周期',
                        key: 'scycle',
                        placeholder: '输入小保周期/天'
                    },
                    {
                        label: '小保时间',
                        key: 'snextTime',
                        placeholder: '输入下次小保时间'
                    },
                    {
                        label: '大保周期',
                        key: 'lcycle',
                        placeholder: '输入大保周期/天'
                    },
                    {
                        label: '大保时间',
                        key: 'lnextTime',
                        placeholder: '输入下次大保时间'
                    }
                ],  //  搜索表单item
                wbjldata: [
                    {
                        nub: 'SB001sx44',
                        time: '2017/12/6 13:00',
                        remark: ''
                    },
                    {
                        nub: 'SB001sx44',
                        time: '2017/12/6 13:00',
                        remark: ''
                    },
                    {
                        nub: 'SB001sx44',
                        time: '2017/12/6 13:00',
                        remark: ''
                    },
                    {
                        nub: 'SB001sx44',
                        time: '2017/12/6 13:00',
                        remark: ''
                    },
                    {
                        nub: 'SB001sx44',
                        time: '2017/12/6 13:00',
                        remark: ''
                    }
                ],  // 维保记录数据
                current: null,
                protectdata: []
            }
        },
        watch: {
            '$store.state.role': {
                handler: function (val, oldVal) {
                    this.role = this._.find(val, function(chr) {
                        return chr == '81'
                    }) ? true : false
                },
                deep: true
            }
        },
        methods: {
            add () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                this.addDevice = true
            },
            refresh () {
                this.http.getAllDevice(this, {})
            },
            /*
            * 添加设备
            * */
            addDeviceOk () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                if (this.deviceUpdate) {
                    this.http.addDevice(this, this.addDeviceForm, 'addDevice', 'addDeviceLoading', 'device/updateDevice')
                    this.deviceUpdate = false
                } else {
                    this.http.addDevice(this, this.addDeviceForm, 'addDevice', 'addDeviceLoading')
                }
            },
            addDeviceClose () {
                this.addDeviceForm = {
                    number: '',
                        name: '',
                        lcycle: '',
                        scycle: '',
                        person: ''
                }
            },
            /* --------------------*/
            onCurrentChange (current) {
                console.log(current)
                this.current = current
            },
            wbjhclick () { //  订单详情按钮
                console.log('维保计划编辑')
            },
            wbjlallclick () {
                let test = {
                    name: '维保记录',
                    id: 'maintenancerecord',
                    type: true,
                    url: '/main/maintenancerecord/' + 'all/key/' + '1'
                }
                this.util.switchHeadTag(this.$parent, test, this.$store.state.tagdata)
            },
            wbjlclick () { //  维保记录查看更多按钮
                console.log(this.current)
                let test = {
                    name: '维保记录',
                    id: 'maintenancerecord',
                    type: true,
                    url: '/main/maintenancerecord/' + this.current.id + '/key/' + '1'
                }
                this.util.switchHeadTag(this.$parent, test, this.$store.state.tagdata)
            }
        },
        components: {
            CardTable,
            MyCard
        },
        mounted: function () {
            this.role = this._.find(this.$store.state.role, function(chr) {
                return chr == '81'
            }) ? true : false
            this.http.getAllDevice(this, {})
        }
    };
</script>
